<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02.VueRouter的基本使用</title>
  </head>
  <body>
    <div id="app">
      <router-link to="/home">Home</router-link>
      <router-link to="/user">User</router-link>
      <router-link to="/home">About</router-link>
      <router-view></router-view>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
      // 注册路由插件
      Vue.use(VueRouter);

      const Home = {
        template: `<div>
                <h2>Home</h2>
                </div>`,
      };

      const User = {
        template: `<div>
                <h2>User</h2>
                </div>`,
      };

      const About = {
        template: `<div>
                <h2>About</h2>
                </div>`,
      };

      const router = new VueRouter({
        routes: [
          {
            path: "/",
            redirect: "/home",
          },
          { path: "/home", component: Home },
          { path: "/user", component: User },
          { path: "/About", component: About },
        ],
      });
      new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
        router,
      });
      /**
       * VueRouter是基于Vue框架的插件
       * 基本使用步骤
       * 1. 安装VueRouter  yarn add vue-router
       * 2. 引入路由插件    组件使用import  普通html页面使用script标签的方式
       * 3. 注册路由插件
       * 4. 创建路由实例对象
       * 5. 书写路由规则
       * 6. 和vm进行关联
       * 7. 在页面中需要显示页面结构的位置使用router-view
       */
    </script>
  </body>
</html>
